{% import "_includes/forms" as forms %}

{% set useEmailAsUsername = craft.app.config.general.useEmailAsUsername %}

<div id="account" class="screen hidden" data-inputs="username,email,password">
    <div class="icon" aria-hidden="true">{{ svg(userIcon, sanitize=false) }}</div>
    <h1>{{ "Create your account"|t('app') }}</h1>

    <form accept-charset="UTF-8">
        {{ csrfInput() }}

        {% if not useEmailAsUsername %}
            {{ forms.textField({
                first: true,
                label: "Username"|t('app'),
                id: 'account-username',
                maxlength: 255
            }) }}
        {% endif %}

        {{ forms.textField({
            first: useEmailAsUsername,
            label: "Email"|t('app'),
            id: 'account-email',
            maxlength: 255
        }) }}

        {{ forms.passwordField({
            label: "Password"|t('app'),
            id: 'account-password'
        }) }}

        <div class="buttons">
            <button type="submit" class="btn big submit">{{ "Next"|t('app') }}</button>
        </div>
    </form>
</div>
